<template>
  <div class="switch-node" v-if="currentNode.nodelevel === 2">
    <a-select @change="orgChange" :key="defaultNodeId" :default-value="defaultNodeOrgname" style="width: 200px;position: relative;float: left" >
      <a-select-option v-for="(item, index) in mainOrganization" :key="item.orgId" :value="item.orgId">{{item.orgname}}</a-select-option>
    </a-select>
    <div  style="width: 200px;position: relative;float: left">{{defaultNodeName ? defaultNodeName : ''}}</div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {listMainOrganization} from "@/api/organization";
import {getSelectedVirtualNodeId, chooseVirtualNode} from "@/api/node";
import events from './events'

export default {
  name: "SwitchNode",
  data() {
    return {
      mainOrganization: [],
      defaultNodeId: 0,
      defaultNodeOrgname: '',
      defaultNodeName: '',
    }
  },
  computed: {
    ...mapGetters(['currentNode'])

  },
  created() {
    this.updateOrganizationList()
  },
  mounted() {
    this.listOrg()
  },
  methods:{
    updateOrganizationList(){
      events.$on('updateOrganizationList', () => {
        listMainOrganization().then(res => {
          this.mainOrganization = res.data
        })
      })
    },
    listOrg() {
      let _this = this
      listMainOrganization().then(res => {
        if (res.data) {
          _this.mainOrganization = res.data
          getSelectedVirtualNodeId().then(r =>{
            if (r.data) {
              let node = res.data.find(v => {return v.nodeId === r.data.id})
              _this.defaultNodeId = node.orgId;
              _this.defaultNodeName = node.nodename;
              _this.defaultNodeOrgname = node.orgname;
              _this.$store.commit('SET_VIRTUAL_NODE', node);
            } else {
              _this.defaultNodeId = res.data[0].orgId;
              _this.defaultNodeName = res.data[0].nodename
              _this.defaultNodeOrgname = res.data[0].orgname;
            }
          })
        }
      })
    },
    getSelectedVirtualNodeId() {
      getSelectedVirtualNodeId().then(res =>{
        if (res.data) {
          this.defaultNodeId = res.data.id;
          this.defaultNodeOrgname = res.data.nodename;
          this.defaultNodeName = res.data.nodename
        }
      })
    },
    orgChange(value) {
      let tag
      let node = this.mainOrganization.find((v,i) => {
        if (v.orgId === value) {
          tag = i;
        }
        return v.orgId === value
      });
      let _this = this
      chooseVirtualNode(node.nodeId).then(res => {
        _this.defaultNodeName = node.nodename
        if (tag === 0) {
          _this.$store.commit('SET_VIRTUAL_NODE', {});
        } else {
          _this.$store.commit('SET_VIRTUAL_NODE', _this.mainOrganization[tag]);
        }
      })
    },
  }
}
</script>

<style scoped lang="less">
.switch-node {
  width: 420px;
  position: relative;
  float: right;
  background-color: #f2f2f2;
  line-height: 35px;
  padding: 0px 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/deep/ .ant-select-selection {
  border: none;
  background-color: transparent;
}

/deep/ .ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active {
  border: none;
}
</style>